<template>
  <div class="member-center">
    <el-row>
      <!-- 左侧菜单 -->
      <el-col :span="5" class="sidebar">
        <side-navigation-menu ref="menus" @select="handleMenuSelect" />
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="19" class="content">
        <component :is="currentComponent" @clickUser="handleOpenOrder" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MyDashboard from './MyDashboard.vue';
import SideNavigationMenu from './SideNavigationMenu.vue';
import AccountPeriodCenter from './AccountPeriodCenter.vue'; // 这是账期中心的组件
import ApplicationRecord from './ApplicationRecord.vue'; // 这是准入申请记录的组件
import ProductManagement from './ProductManagement.vue'; // 这是商品管理的组件
import OrderManagement from './OrderManagement.vue'; // 这是订单管理的组件
import InquiryManagement from './InquiryManagement.vue'; // 这是询单管理的组件

export default {
  components: {
    MyDashboard,
    SideNavigationMenu,
    AccountPeriodCenter,
    ApplicationRecord,
    ProductManagement,
    OrderManagement,
    InquiryManagement
  },
  data() {
    return {
      currentComponent: 'MyDashboard' // 默认显示的组件
    };
  },
  methods: {
    handleMenuSelect(index) {
      switch (index) {
        case '0':
          this.currentComponent = 'MyDashboard';
          break;
        case '1':
        case '1-1':
          this.currentComponent = 'AccountPeriodCenter';
          break;
        case '1-2':
          this.currentComponent = 'ApplicationRecord';
          break;
        case '2':
        case '2-1':
          this.currentComponent = 'ProductManagement';
          break;
        case '3':
        case '3-1':
          this.currentComponent = 'OrderManagement';
          break;
        case '4':
        case '4-1':
          this.currentComponent = 'InquiryManagement';
          break;
        default:
          this.currentComponent = 'MyDashboard';
      }
    },
    onAddWeChat() {
      this.$message.info('扫码添加企业微信');
    },
    onViewAllOrders() {
      this.$message.info('跳转到全部订单页');
    },
    handleOpenOrder(index) {
      this.$refs.menus.handleSelect(index)
    }
  }
};
</script>

<style scoped>
.member-center {
  padding: 20px;
  background-color: #fff;
}
.sidebar {
  background-color: #f5f5f5;
  height: 100vh;
}
.content {
  padding: 20px;
}
</style>